<template>
  <div>
    <div class="xq_div1">
      <div class="xq_div1_con" v-for="i in spsj" :key="i.rid">
        <img class="xq_div1_con_img" :src="i.r_pic" alt="" />
        <div class="xq_div1_text">
          <h1 class="xq_div1_text_h1">{{i.rname}}</h1>
          <div class="xq_div1_text_tit">
              <span>用户名称</span>▪
              <span>{{i.r_collection}}</span>
              <span>收藏</span>▪
              <span>175</span>
              <span>浏览</span> 
          </div>

          <div class="xq_div1_text_item">
            <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>

             <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>

             <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>

             <div class="xq_div1_text_item_one">
              <img class="xq_div1_text_item_one_img" src="../assets/zhu.png" alt="">
              <div class="xq_div1_text_item_one_t">工艺</div>
              <div class="xq_div1_text_item_one_t1">炒</div>
            </div>
          </div>

          <div class="xq_div1_text_item_con">
            <div class="xq_div1_text_item_con_one">
              <h2 class="xq_div1_text_item_con_one_1">主料</h2>
              <div class="xq_div1_text_item_con_one_2">main</div>
            </div>
            <div class="xq_div1_text_item_con_two">
                <div class="xq_div1_text_item_con_two_text">鸡蛋 3个</div>
                 <div class="xq_div1_text_item_con_two_text">鸡蛋 3个</div>
                  <div class="xq_div1_text_item_con_two_text">鸡蛋 3个</div>
            </div>
          </div>

          <div class="xq_div1_text_item_con22">
            <div class="xq_div1_text_item_con22_lef">
              <h2 class="xq_div1_text_item_con22_lef_1">辅料</h2>
              <div class="xq_div1_text_item_con22_lef_2">others</div>
            </div>
            <div class="xq_div1_text_item_con22_rig">
              <div class="xq_div1_text_item_con22_rig_con">
                <div class="xq_div1_text_item_con22_rig_con_item">味达美清香米醋15毫升</div>
                <div class="xq_div1_text_item_con22_rig_con_item">六月鲜8克轻盐特级原汁酱油15毫升</div>
                <div class="xq_div1_text_item_con22_rig_con_item">葡萄籽油15毫升</div>
              </div>
            </div>
          </div>
        </div>
        <div class="xq_div1_item">
          <img class="xq_div1_item_img" src="../assets/er_wei_ma.png" alt="">
          <h2 class="xq_div1_item_img_text1">扫描二维码</h2>
          <h6 class="xq_div1_item_img_text2">用手机查看这篇菜谱</h6>
          <div class="xq_div1_item_btn">
            <el-button :plain="true" @click="uscsp()">
              <img class="xq_div1_item_btn_img" src="../assets/xinxin.png" alt="">
              <span class="xq_div1_item_btn_text">收藏</span>
            </el-button>
          </div>
          <div class="pfkj">
            <div class="block">
              <span class="demonstration">评分：</span>
              <el-rate
                v-model="value2"
                :colors="colors"
                change="pf()">
              </el-rate>
            </div>
            <span @click="pfqk()">立即评价</span>
          </div>
          <div class="xq_div1_item_foot">
            创建时间：2022-06-12
赛螃蟹的版权归作者所有，没有作者本人的书面许可任何人不得转载或使用其中整体或任何部分内容。
          </div>
        </div>
      </div>
    </div>
    <div class="xq_div2">
      <div class="xq_div2_con">
        <div class="xq_div2_con_lef">
          <div class="xq_div2_con_lef_1">
            <div class="xq_div2_con_lef_1_top">
              <div class="xq_div2_con_lef_1_top_11">
                <div class="xq_div2_con_lef_1_top_item">
                  <img
                    class="xq_div2_con_lef_1_top_img"
                    src="../assets/R.jpg"
                    alt=""
                  />
                  <div class="xq_div2_con_lef_1_top_item_text_box">
                    <div class="xq_div2_con_lef_1_top_item_text">用户名称</div>
                    <div class="xq_div2_con_lef_1_top_item_text2">
                      <span>276 菜谱</span>
                      <span>147 粉丝</span>
                    </div>
                  </div>
                </div>
                <img
                  class="xq_div2_con_lef_1_top_item_img"
                  src="../assets/yinhao.png"
                  alt=""
                />
              </div>
              <div class="xq_div2_con_lef_1_bootm">
                夏天没有什么胃口，可以做上这道仿蟹菜，没有螃蟹那么性寒，鸡蛋含有丰富的蛋白质且容易被人体吸收，翻炒之后倒入灵魂的姜醋汁，就可以以假乱真的在吃螃蟹了
              </div>
            </div>
          </div>
          <h1>赛螃蟹的做法</h1>
          <div v-for="(item, index) in 12" :key="index">
            <div class="xq_div2_con_lef_2">
              <div class="xq_div2_con_lef_2_lef">
                <div class="xq_div2_con_lef_2_lef_con">
                  <h2 class="xq_div2_con_lef_2_lef_h2">步骤</h2>
                  <span class="xq_div2_con_lef_2_lef_span">step</span>
                  <h1>1</h1>
                </div>
              </div>
              <img
                class="xq_div2_con_lef_2_rig"
                src="../assets/s1.jpg"
                alt=""
              />
            </div>
            <h2>准备食材：白玉菇一盒（125克），鸡蛋3个，生姜一块</h2>
          </div>
          <div>
            <div class="xq_div2_con_lef_2">
              <div class="xq_div2_con_lef_2_lef">
                <div class="xq_div2_con_lef_2_lef_con">
                  <h2 class="xq_div2_con_lef_2_lef_h2">成品</h2>
                </div>
              </div>
              <img
                class="xq_div2_con_lef_2_rig"
                src="../assets/cp.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="xq_div2_con_rig">
          <div class="user_comments">
            <div class="user_commentss">
              <div>用户评论</div>
              <div class="el-icon-chat-dot-square" @click="showpl=!showpl"></div>
            </div>
            <!-- 发表评论 -->
            <div v-if="showpl" style="margin:5px">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="userpl"
                maxlength="50"
                show-word-limit
                resize="none">
              </el-input>
              <span class="fabpl" @click="showpl=false;fabiaopl()">发表评论</span>
            </div>
            <!-- 查询到的评论列表 -->
            <div v-if="!userplxq.length" class="wpls">
              <span>
                还没有饭友评论哦！快来打破零回复把！
              </span>
            </div>
            <div class="user_commentsx" v-else>
              <ul>
                <li>
                  <div v-for="i in userplxq" :key="i.reid">
                    <div>
                      <div>{{i.username}}</div>
                      <div class="el-icon-warning-outline"></div>
                    </div>
                    <span>
                      {{i.content}}
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="xq_div2_con_rig_top">
            <img
              class="xq_div2_con_rig_top_img"
              src="../assets/2000136191_14.jpg"
              alt=""
            />
            <div class="xq_div2_con_rig_top_text">无版权背景素材</div>
          </div>

          <div class="xq_div2_con_rig_item1">
            <div class="xq_div2_con_rig_item1_box">
              <h2>这道菜适合我吃吗?</h2>
              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">高血压人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">高血糖人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">高血脂人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">减肥人群</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>

              <div class="xq_div2_con_rig_item1_box_1">
                <div class="xq_div2_con_rig_item1_box_1_big">
                  <img
                    class="xq_div2_con_rig_item1_box_1_img"
                    src="../assets/0001png.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_1_text">儿童</div>
                </div>
                <div class="xq_div2_con_rig_item1_box_1_big2">
                  <img
                    class="xq_div2_con_rig_item1_box_2_img"
                    src="../assets/0006.png"
                    alt=""
                  />
                  <div class="xq_div2_con_rig_item1_box_2_text">控制少吃</div>
                </div>
              </div>
            </div>
          </div>

          <div class="xq_div2_con_rig_item2">
            <div class="xq_div2_con_rig_item2_text">
              <img class="xq_div2_con_rig_item2_img" src="../assets/er_wei_ma.png" alt="">
              <div>扫描二维码     下载APP</div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
  props:["rd"],
  data() {
    return {
      key: null,
      spsj:null,
      showpl:false,
      userpl:'',
      userplxq:[],
      value2: 5,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    }
  },
  computed:{
    ...mapState(["loginname"],["loginshow"]),
  },
  methods: {
    ...mapMutations(["setls"]),
    torecipexq(){
      // console.log(this.rd)
      const url="/ridlist"
      const params=`rid=${this.rd}`
      this.axios.post(url,params).then((res)=>{
        // console.log(res)
        this.spsj=res.data.data
        console.log(this.spsj)
      })
    },
    //查询评论
    cxpl(){
      const url="/pllist"
      const params=`recipeid=${this.rd}`
      this.axios.post(url,params).then((res)=>{
        // console.log(res)
        this.userplxq=res.data.data
        // console.log(this.userplxq)
      })
    },
    //发表评论
    fabiaopl(){
      const url="/indexpl"
      const params=`recipeid=${this.rd}&username=${this.loginname}&content=${this.userpl}`
      this.axios.post(url,params).then((res)=>{
        console.log('评论',res)
        if(res.data.code==200){
          this.cxpl()
        }
      })
    },
    //评分情况
    pfqk(){
      console.log(this.value2)
      const url='/pflist'
      const params=`pf_recipeid=${this.rd}&username=${this.loginname}&score=${this.value2}`
      this.axios.post(url,params).then((res)=>{
        console.log(res)
        if(res.data.code==333){
          alert('您已经评价过此菜谱')
        }else if(res.data.code==200){
          alert('评价成功')
        }else{
          alert('评价失败')
        }
      })
    },
    
    //收藏食谱
    uscsp(){
      if(!this.$store.state.loginname){
        var rs=confirm('还未登录，前去登录？')
        if(rs){
          this.setls(true)
        }
        return
      }
      const url="/collection"
      const params=`uname=${this.$store.state.loginname}&collection_rid=${this.rd}`
      this.axios.post(url,params).then((res)=>{
        console.log('收藏',res)
        if(res.data.code==200){
          this.$message('收藏成功');
        }
      })
    }
  },
  mounted(){
    this.torecipexq()
    this.cxpl()
  }
};
</script>

<style lang="scss">
.block{
  display: flex;
  width: 200px;
  justify-content: center;
  font-size: 20px;
  margin-top: 5px;
}
.el-rate__item{
  transform: scale(1.8);
}
.pfkj{
  >span{
    display: block;
    text-align: center;
    margin-top: 9px;
    line-height: 40px;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    background-color: #f66f36;
    &:hover{
      background-color: #ff621f;
    }
  }
}
.xq_div1 {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efeeec;
}
.xq_div1_con {
  width: 1200px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xq_div1_con_img{
  width: 350px;
  height: 535px;
  object-fit: scale-down;
}
.xq_div1_text {
  width: 560px;
  height: 536px;
}
.xq_div1_item {
  width: 260px;
  height: 535px;
  display: flex;
  flex-direction: column;
    align-items: center;
    justify-content: space-around;
  background-color: white;
}
.xq_div1_item_img{
  width: 127px;
  height: 127px;
}
.xq_div1_item_img_text1{
  margin: 0;
}
.xq_div1_item_img_text2{
  margin: 0;
}
.xq_div1_item_btn{
  width: 200px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f66f36;
  border-radius: 5px;
  &:hover{
    background-color: #ff621f;
  }
}
.xq_div1_item_btn_img{
  width: 24px;height: 24px;
}
.xq_div1_item_btn_text{
  font-size: 18px;
  font-weight: 600;
  color: white;
  position: relative;
  top: -5px;
}
.el-button.is-plain{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0;
}
.el-button.is-plain:focus, .el-button.is-plain:hover{
  background-color: transparent;
}
.xq_div1_item_foot{
  width: 200px;
  height: 110px;
  padding: 26px 30px ;
  background-color: white;
}
.xq_div2 {
  width: 100%;
  min-height: 1000px;
  display: flex;
  justify-content: center;
  background-color: #f7f6f5;
}
.xq_div2_con {
  width: 1200px;
  min-height: 1000px;
  display: flex;
  justify-content: space-between;
}
.xq_div2_con_lef {
  width: 810px;
  min-height: 1000px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xq_div2_con_rig {
  width: 350px;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}
.user_comments{
  display: flex;
  flex-direction: column;
  margin: 20px;
  .fabpl{
    display: block;
    text-align: center;
    margin: 5px auto;
    background-color: red;
    color: #fff;
    line-height: 30px;
    width: 50%;
  }
}
.user_commentss{
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin: 10px 0;
  div{
  font-size: 22px;
  margin-right: 10px;
  }
}
.wpls{
    line-height: 100px;
    border: 1px solid black;
    >span{
      display: block;
      text-align: center;
    }
  }
.user_commentsx{
  // margin: 5px 10px;
  max-height: 600px;
  overflow-y: auto;
  ul{
    margin: 0;
    padding: 0;
    li{
      >div{
    margin: 10px 5px;
    // padding: 5px;
    border: 1px solid black;
    >div:first-child{
      display: flex;
      justify-content: space-between;
      background-color: rgb(139, 128, 61);
      padding: 5px;
    }
    >span{
      font-size: 14px;
      overflow:hidden; 
      text-overflow:ellipsis;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2; 
      text-indent: 2em;
      margin: 5px 0;
      padding:0 5px;
    }
  }
    }
  }
}
.xq_div2_con_lef_1 {
  width: 810px;
  height: 148px;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 10px;
}
.xq_div2_con_lef_2 {
  padding: 30px 30px;
  border-radius: 20px;
  display: flex;
  background-color: #ffffff;
}
.xq_div2_con_lef_2_lef {
  width: 86px;
  height: 128px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe851;
}
.xq_div2_con_lef_2_lef_con {
  width: 70px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.xq_div2_con_lef_2_rig {
  margin-left: 10px;
  border-radius: 20px;
}
.xq_div2_con_lef_2_lef_h2 {
  margin: 0;
}
.xq_div2_con_lef_2_lef_span {
  font-size: 10px;
}
.xq_div2_con_lef_1_top {
  width: 810px;
  height: 60px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}
.xq_div2_con_lef_1_top_11 {
  width: 762px;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
.xq_div2_con_lef_1_top_img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.xq_div2_con_lef_1_top_item {
  display: flex;
}
.xq_div2_con_lef_1_top_item_text_box {
  margin-left: 20px;
}
.xq_div2_con_lef_1_top_item_text {
  font-weight: 600;
  margin-top: 10px;
}
.xq_div2_con_lef_1_top_item_text2 {
  font-size: 13px;
  color: #999999;
  margin-top: 5px;
}
.xq_div2_con_lef_1_top_item_img {
  width: 38px;
  height: 30px;
}
.xq_div2_con_lef_1_bootm {
  width: 762px;
  height: 60px;
  margin-top: 8px;
}
.xq_div2_con_rig_top {
  width: 302px;
  height: 242px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 24px 10px 24px;
  background-color: #ffffff;
  border-radius: 20px;
  margin-bottom: 40px;
}
.xq_div2_con_rig_top_text {
  font-weight: 600;
  margin-top: 5px;
}
.xq_div2_con_rig_top_img {
  width: 302px;
  height: 192px;
}
.xq_div2_con_rig_item1 {
  width: 350px;
  height: 380px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.xq_div2_con_rig_item1_box {
  width: 308px;
  height: 380px;
}
.xq_div2_con_rig_item1_box_1 {
  width: 308px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: aliceblue; */
  background-image: linear-gradient(
    to right,
    rgb(243, 238, 236),
    rgb(241, 232, 146)
  );
  border: 1px solid #ffe08e;
  border-radius: 5px;
  margin-top: 10px;
}
.xq_div2_con_rig_item1_box_1_img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 6px 6px;
  background-color: #ffbe11;
}
.xq_div2_con_rig_item1_box_1_text {
  font-weight: 600;
  margin-left: 10px;
}
.xq_div2_con_rig_item1_box_2_img {
  width: 14px;
  height: 14px;
  margin-left: 100px;
}
.xq_div2_con_rig_item1_box_2_text {
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
  color: #ffba01;
}
.xq_div2_con_rig_item1_box_1_big {
  display: flex;
  justify-content: center;
  align-items: center;
}
.xq_div2_con_rig_item1_box_1_big2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.xq_div2_con_rig_item2 {
  width: 350px;
  height: 643px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  margin-top: 40px;
  background-image: url("../assets/00007.jpg");
  background-size: 100%;
  cursor: pointer;
  /* -webkit-animation: 3s; */
  background-size: 350px 643px;
}
.xq_div2_con_rig_item2:hover{
  transition: 1s;
background-size: 360px 653px;
}
.xq_div2_con_rig_item2_text{
display: flex;
width: 230px;
height: 230px;
margin-top: 38px;
background-color: white;
border-radius: 20px;
flex-direction: column;
    align-items: center;
    justify-content: center;
}
.xq_div2_con_rig_item2_img{
  width: 150px;
    height: 150px;
    padding: 20px 20px;
    
}
.xq_div1_text_h1{
  margin: 0;
  margin-left: 20px;
}
.xq_div1_text_tit{
  color: #666666;
  font-size: 15px;
  margin-left: 20px;
  margin-top: 10px;
}
.xq_div1_text_item{
  width: 560px;
  height: 160px;
  display: flex;
 margin-top: 20px;
  /* background-color: #ffe08e; */
}
.xq_div1_text_item_one{
  width: 80px;
  height: 160px;
  border-radius: 20px;
  display: flex;
      flex-direction: column;
    align-items: center;
    /* justify-content: space-around; */
  background-color: #ffffff;
  margin-left: 20px;
}
.xq_div1_text_item_one_img{
  width: 50px;
  height: 50px;
  padding: 10px 10px ;
  border-radius: 50%;
  margin-top: 20px;
  background-color: #fafafa;
}
.xq_div1_text_item_one_t{
  font-size: 12px;
  color: #b3b3b3;
  margin-top: 20px;
}
.xq_div1_text_item_one_t1{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.xq_div1_text_item_con{
  width: 520px;
  height: 70px;
  margin-left: 20px;
  border-radius: 20px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
.xq_div1_text_item_con_one{
  width: 80px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffe851;
}
.xq_div1_text_item_con_one_1{
  margin: 0;
}
.xq_div1_text_item_con_one_2{
  font-size: 12px;
  font-weight: 600;
}
.xq_div1_text_item_con_two{
  width: 400px;
  height: 44px;
  display: flex;
  align-items: center;
  
}
.xq_div1_text_item_con_two_text{
  width: 80px;
  height: 20px;
 padding: 10px 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 5px;
 font-size: 13px;
 background-color: #f5f5f5;
 border-radius: 20px;
}
.xq_div1_text_item_con22{
 width: 520px;
 height: 158px;
  margin-left: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin-top: 10px;
 background-color: white;
}
.xq_div1_text_item_con22_lef{
   width: 80px;
  height: 158px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffe851;
}
.xq_div1_text_item_con22_lef_1{
  margin: 0;
}
.xq_div1_text_item_con22_lef_2{
   font-size: 12px;
  font-weight: 600;
}

.xq_div1_text_item_con22_rig_con{
  width: 400px;
  height: 132px;
  display: flex;
  flex-direction: column;
    justify-content: space-around;
  /* background-color: #ffffff; */
}
.xq_div1_text_item_con22_rig_con_item{
      width: 220px;
    height: 20px;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    font-size: 13px;
    background-color: #f5f5f5;
    border-radius: 20px;
}

</style>